<html>
  <head>
    <style>
	  	.my_table {
	  	   margin:2px;
	  	   font-family:Arial;
	  	   font-size:11px;
	  	   border: solid 1px #aaaaaa;
		}

		.my_table tr.odd {
		  background-color:#fff5cc;
		}

		.my_table tr.even {
		  background-color:#ffffff;
		}

		.my_table td {
		  padding: 3px;
		  vertical-align:top;
		}

		.my_table td.rborder {
		  border-right: solid 1px #aaaaaa;
		}

		.my_table td.bborder {
		  border-bottom: solid 1px #aaaaaa;
		}

		.my_table td.tborder {
		  border-top: solid 1px #aaaaaa;
		}

		.my_table td.ralign {
		  text-align: right;
		}

		.my_table td.calign {
		  text-align: center;
		}

		.my_table tr.heading td {
		  padding: 5px;
		  font-weight: bold;
		  text-align: center;
		  background-color: #aff2fb;
		}

		.my_table td.odd {
		  background-color: #aff2fb;
		}

		.my_table td.even {
		  background-color: #ffffff;
		}

		.style1 {
			font-size: 12px;
			font-weight: bold;
			color: #000000;
			line-height: 1.5;
	   }
    </style>
	<script type="text/javascript" src="lib/jquery-1.4.2.js"></script>
    <script>
      var userNameKey = 'userName';
	  var val1 = "";

      function populate() {
        updateValue(userNameKey, getValue(userNameKey));
		$('body').animate({ opacity: "show" }, "slow");
      }

      function store(optionKey) {
		var optionValue = $('#' + optionKey).val();
		updateValue(optionKey, optionValue);

        chrome.self.getBackgroundPage().setItem(optionKey,optionValue);
      }

      function getValue(key) {
        return chrome.self.getBackgroundPage().getItem(key);
      }

      function updateValue(key, value) {
        $('td[name=' + key + ']').text(value);
      }

    </script>
  </head>
  <body style="display: none" onload='populate()'>
    <form name='form1'>
      <table class="my_table" cellpadding="0" cellspacing="0" width=400px>
        <tr>
	  	  <td class="style1" colspan="3" align="center">Quick Exadel Webtime properties</td>
	  	</tr>
	  	<tr class="odd">
		  <td class="rborder" >User Name</td>
		  <td class="lalign"><input type="text" size="35" id="userName"/></td>
		  <td><input type="submit" value="Save" onClick="store(userNameKey)"/></td>
		</tr>
		<tr class="odd">
		  <td class="rborder"></td>
		  <td class="ralign" colspan="2"></td>
		</tr>
		<tr class="even">
		<td colspan="3">Option values</td>
		</tr>
		<tr class="odd">
		  <td class="rborder">User</td>
		  <td class="ralign" colspan="2" name="userName"></td>
		</tr>
      </table>
    </form>
  </body>
</html>